<template>
  <div class="content-box">
    <h6 class="title-h6">设置物料</h6>
    <div style="width:650px;margin:0 auto">
      <el-form  :model="materialFrom"  label-position="right" label-width="150px" style="padding-top:20px;text-align:left;padding-left:50px;">
        <el-form-item label="所属产品">
            <el-input v-model="materialFrom.pro" disabled class="pro"></el-input>
        </el-form-item>
        <el-form-item label="广告物料类型">
          <el-radio-group v-model="materialFrom.type">
            <el-radio v-for="(item, index) in materialType" :label="item" :key="index">{{item}}</el-radio>
          </el-radio-group> 
        </el-form-item>
        <el-form-item label="提示广告文字">
            <el-input v-model="materialFrom.adWords"></el-input>
        </el-form-item>
        <el-form-item label="桌面快捷方式名称" v-show="materialFrom.type !== '安装软件'">
          <el-input v-model="materialFrom.shortcut"></el-input>
        </el-form-item>
        <el-form-item label="注册表路径" v-show="materialFrom.type === '安装软件'">
          <el-input v-model="materialFrom.registerUrl"></el-input>
        </el-form-item>
        <el-form-item label="注册表键名" v-show="materialFrom.type === '安装软件'">
          <el-input v-model="materialFrom.registerKey"></el-input>
        </el-form-item>
        <el-form-item label="注册后缀名" v-show="materialFrom.type === '安装软件'">
          <el-input v-model="materialFrom.registerSuffix"></el-input>
        </el-form-item>
        <el-form-item label="排重天数" v-show="materialFrom.type === '安装软件'">
          <el-input v-model="materialFrom.day"></el-input>
        </el-form-item>
        <el-form-item label="软件图标">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="勾选图标" v-show="materialFrom.type === '创建链接'">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" >添加</el-button>
        </el-form-item>
        </el-form>
    </div>
  </div>
</template>
<script>
export default {
    data () {
      return {
        materialFrom: {
          pro:'爱奇艺',
          type:'设置首页',
          adWords: '',
          shortcut: '',
          registerUrl: '',
          registerKey: '',
          registerSuffix: '',
          day: ''
        },
        imageUrl:'',
        materialType: ['设置首页', '安装软件', '创建链接']
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .pro.is-disabled .el-input__inner{
    border-color: #fff;
    color: #666;
  }
  
</style>
